/* 
  学习目标：性能优化-使用PurComponent
  1. 浅比较
  2. 👍推荐创建新数据，再操作
  3. 避免修改原数据
*/
import React from 'react';
export default class App extends React.Component {
    state = {
        count: 0,
        msg: 'hello React',
        obj: { msg: '12312' },
    };

    handleClick = () => {
        this.setState({ count: this.state.count + 1 });
    };

    handleMsg = () => {
        // ❌不要直接修改state对象
        // this.state.msg = 'Hello Vue';
        // this.setState(this.state);
        // this.state.obj.msg = 'Hello 修改对象了';
        // this.setState(this.state);

        // 注意：PureComponent是浅层比较，只会比较引用类型的引用地址，不会监听的属性是否真的改变了
        // 1. 在引用类型时，要避免修改原数据。比如：数组的push  splice，直接修改对象的属性
        // 2. 在基本值时，也要保持避免修改原数据的习惯。

        // 👍推荐，复制一份数据再操作
        this.setState({
            obj: {
                ...this.state.obj,
                msg: Math.random() + '',
            },
        });
    };

    render() {
        return (
            <div>
                <h1>数量： {this.state.count}</h1>
                <button onClick={this.handleClick}>点我修改数量</button>
                <button onClick={this.handleMsg}>点我修改msg</button>
                <Footer msg={this.state.msg} obj={this.state.obj}></Footer>
            </div>
        );
    }
}

class Footer extends React.PureComponent {
    render() {
        // 学习目标：
        // 1. JS值比较简单类型
        const num1 = '123';
        const num2 = '456';
        console.log('值比较', num1 === num2); //false

        const obj = { msg: '123' };
        const obj2 = obj;
        console.log('复杂比较', obj === obj2);

        console.log('Footer被刷新了');
        return (
            <div>
                <div>{this.props.msg}</div>
                <h1>{this.props.obj.msg}</h1>
            </div>
        );
    }
}

// class Footer2 extends React.Component {
//   render() {
//     return <div>test</div>;
//   }
// }
